@extends("admin.layout.main")

@section("content")
    <div id="app">

        {{--粉丝备注--}}
        <Modal v-model="fansModal" title="备注粉丝" width="360" @on-ok="storeMarkFans">
        <span>
                昵称:
                  <i-input v-model="fans.nickname" long></i-input>
            </span>
        <span>
                手机号:
                  <i-input v-model="fans.phone" disabled long></i-input>
            </span>
        </Modal>

        <Row type="flex"  align="middle">
            <Spin size="large" fix v-if="spinShow"></Spin>
            <i-col span="35" style="margin: 20px ;">
                <span>
                    电话:
                     <i-input v-model="post_tel" style="width:100px"></i-input>
                </span>

                <span>
                    收货人:
                     <i-input v-model="post_recevier" style="width:100px"></i-input>
                </span>

                <span>
                    地址:
                     <i-input v-model="post_address" style="width:150px"></i-input>
                </span>

                <span>
                    头条昵称:
                     <i-select style="width:150px" v-model="nickname">
                         <i-option value="">全部</i-option>
                         <i-option value="1">已有昵称</i-option>
                         <i-option value="2">未知昵称</i-option>
                     </i-select>
                </span>

                <span style="padding-left: 10px">
                      <i-button type="primary" @click="getList">查询</i-button>
                </span>

                <span style="padding-left: 10px">
                       <a :href="combine_link" style="display: inline-block;margin-left: 15px;">数据下载</a>
                </span>

            </i-col>



        </Row>
        <Row type="flex" justify="center" align="middle">
            <i-col span="23" style="margin-top: 20px">
                <i-table ref="selection" :data="tableData" height="800" border :columns="tableColumns" stripe
                         style="width: 100% !important;" @on-sort-change="changeSort">
                </i-table>
            </i-col>
        </Row>

        <Row type="flex" justify="center" class="code-row-bg">
            <i-col>
                <Page
                        size="small"
                        :total="page.total"
                        :current="page.current"
                        :page-size="page.pageSize"
                        show-total
                        show-elevator
                        @on-change="getList">

                </Page>
            </i-col>
        </Row>

    </div>
    <script src="/js/layer/layer.js"></script>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {
                return {
                    token:'',
                    tableData: [],
                    tableColumns: [
                        {
                            title: '实际支付金额',
                            key:'actual_payment_amount',
                            sortable:true
                        },
                        {
                            title: '订单数',
                            key:'number',
                            sortable:true
                        },
                        {
                            title:'头条昵称',
                            key:'nickname',
                            width: '200',
                            render:(h,params) => {
                                let nickname = params.row.nickname;

                                if(nickname != '未知'){
                                    return h('div',{
                                        style:{
                                            'color':'green',
                                            'font-size':'12px'
                                        },
                                        on: {
                                            click: () => {
                                                this.markFans(params.row)
                                            }
                                        }
                                    },nickname);
                                }else{
                                    return h('Button',{
                                        props: {
                                            type: 'primary',
                                            size: 'small',
                                        },
                                        on: {
                                            click: () => {
                                                this.markFans(params.row)
                                            }
                                        }
                                    },'备注');
                                }

                            }
                        },
                        {
                            title: '用户',
                            key:'post_recevier'
                        },

                        {
                            title: '电话',
                            key:'post_tel'
                        },
                        {
                            title: '地址',
                            key:'post_address',
                            sortable:true
                        },
                        {
                            title: '首次购买时间',
                            key:'first_time',
                            sortable:true
                        },
                        {
                            title: '最后购买时间',
                            key:'last_time',
                            sortable:true
                        },


                    ],
                    spinShow:false,
                    page: {
                        total: 0,
                        current: 1,
                        pageSize: 50,
                    },
                    post_tel:'',
                    post_recevier:'',
                    nickname:'',
                    post_address:'',
                    key:"",
                    order:'',
                    fansModal:false,
                    fans:{
                        nickname:'',
                        phone:''
                    },
                }
            },
            mounted(){
                this.token = window.localStorage.getItem('current_user');
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods: {
                getList(page = 1) {
                    let that = this;
                    this.spinShow = true;
                    axios.get("/admin/order/taobao/buyer/list",{
                        params: {
                            token:vm.token,
                            page:page,
                            post_tel:that.post_tel,
                            post_recevier:that.post_recevier,
                            nickname:that.nickname,
                            post_address:that.post_address,
                            order:that.order,
                            key:that.key
                        }
                    })
                    .then(function (response) {
                        vm.tableData = response.data.result.data;
                        vm.page.total = response.data.result.total;
                        vm.page.current = response.data.result.current_page;
                        vm.page.pageSize = response.data.result.per_page;
                        that.spinShow = false;
                    });
                },
                changeSort(param){
                    this.key = param.key;
                    this.order = param.order;
                    this.getList(1);
                },
                markFans(row){ //粉丝备注
                    this.fansModal = true;
                    this.fans.phone = row.post_tel;
                    this.fans.nickname  =   '';
                    if(row.nickname != '未知'){
                        this.fans.nickname = row.nickname;
                    }
                },
                storeMarkFans(){    //保存粉丝备注
                    console.log(this.fans);
                    axios.get('/admin/order/taobao/storeMark', {
                        params: {
                            token:vm.token,
                            nickname:this.fans.nickname,
                            phone:this.fans.phone
                        }
                    }).then((response) => {
                        vm.$Message.success('备注完成');
                        vm.getList(vm.page.current);
                    });

                },
            },
            computed: {
                combine_link() {
                    return '/admin/order/taobao/buyer_export?post_tel=' + this.post_tel + '&token=' + this.token +
                        '&post_recevier=' + this.post_recevier+'&nickname='+this.nickname;
                }

            }

        });

        vm.token = getToken();
        vm.getList(1);

    </script>

@endsection

